<template>
    <div class="addList">
        <div class="add-list">
            <div class="add-item flex-a flex-b" v-for="item in list" :key="item.addressId" @click="selAddress(item)">
                <div class="left">
                    <div class="flex-a"><span class="name">{{ item.userName }}</span><span class="phone">{{
                item.userPhone
            }}</span>
                    </div>
                    <div class="address">{{ item.userAddress + item.userAddressInit }}
                    </div>
                </div>
                <div class="right" @click.stop="editAddress(item)">编辑</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getAddressList } from '../../../../api/index'
export default {
    components: {

    },
    setup() {
        const data = reactive({
            addressList: [],
            dataOptions: {
                id: 'addressId',
                addressDetail: 'testaddressDetail',
                addressName: 'userName'
            },
            list: [],
            address: {},
            type: '',
            server_id: '',
            server_User_Id: '',
            client_ID: '',
        });

        onMounted(() => {
            getAddressList().then(response => {
                if (response.code == 0) {
                    data.list = response.data.list
                }
            })
            const router = useRouter();
            if (router.params.type) {
                data.type = router.params.type
            }
            if (router.params.server_id) {
                data.server_id = router.params.server_id
            }
            if (router.params.server_User_Id) {
                data.server_User_Id = router.params.server_User_Id
            }
            if (router.params.client_ID) {
                data.client_ID = router.params.client_ID
            }
        });
        const addAddress = () => {
            Taro.navigateTo({ url: '/packageA/pages/writeAddress/index?server_id=' + data.server_id + '&client_ID=' + data.client_ID + '&server_User_Id=' + data.server_User_Id });
        }
        const editAddress = (item) => {
            Taro.navigateTo({ url: '/packageA/pages/writeAddress/index?addressId=' + item.ID + '&server_id=' + data.server_id + '&client_ID=' + data.client_ID + '&server_User_Id=' + data.server_User_Id });
        }
        const selAddress = (item) => {
            if (data.type == 'order') {
                Taro.redirectTo({ url: '/packageA/pages/subOrder/index?addressId=' + item.ID + '&server_id=' + data.server_id + '&client_ID=' + data.client_ID + '&server_User_Id=' + data.server_User_Id });
            } else if (data.type == 'house') {
                Taro.redirectTo({ url: '/packageA/pages/houseOrder/index?addressId=' + item.ID });
            }
        }

        return {
            ...toRefs(data),
            addAddress,
            editAddress,
            selAddress,
        }
    }
};
</script>


<style lang="scss">
.addList {
    .add-list {
        .add-item {
            padding: 20rpx 30rpx;
            box-sizing: border-box;
            background: #fff;

            .left {
                .name {
                    color: #212121;
                    margin-right: 10rpx;
                    font-size: 34rpx;
                }

                .phone {
                    color: #808080;
                    font-size: 28rpx;
                }

                .address {
                    color: #404040;
                    margin-top: 20rpx;
                    font-size: 30rpx;
                }
            }

            .right {
                color: #C0C0C0;
                font-size: 30rpx;
            }
        }
    }

    .nut-address-list__bottom {
        position: fixed;
        bottom: 0;

        .nut-button {
            background: #4972F2;
        }
    }
}
</style>